<template>
  <el-card class="box-card" style="width: 50%;">
    <div slot="header" class="clearfix">
      <span>事务管理</span>
    </div>
    <div class="transTitle">
      <el-input v-model="transValue" placeholder="事务名称" clearable></el-input>
      <el-button type="primary" plain size="small" style="margin-left: 5px;" @click="handlerAddTrans">新增事务</el-button>
    </div>
    <el-table ref="multipleTable" :data="transList" tooltip-effect="dark" style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column align="center" label="事务名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="事务状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949"
            @change="updateTransList(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="removeTransList(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="transButtom">
      <span>{{ transList.length }} 条数据</span>
      <!-- <el-button-group>
        <el-button type="primary" plain>全 部</el-button>
        <el-button type="warning" plain>未完成</el-button>
        <el-button type="success" plain>已完成</el-button>
      </el-button-group> -->
      <el-button type="danger" plain @click="removeCompleteTransList">删除已完成</el-button>
    </div>
  </el-card>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {}
  },
  created() {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['transList']),
    // v-model与store中的state双向绑定
    transValue: {
      get() {
        return this.$store.state.inputValue
      },
      set(value) {
        this.$store.commit('setInputValue', value)
      }
    }
  },
  methods: {
    ...mapMutations(['addTransList', 'removeTransList', 'updateTransList', 'removeCompleteTransList']),
    /**
     * 向列表中新增事务
     */
    handlerAddTrans() {
      if (this.transValue.trim().length <= 0) {
        this.$message.warning('文本框内容不能为空')
        return
      }
      this.addTransList(this.transValue)
    }
  }
}
</script>

<style>
.transButtom {
  height: 40px;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  line-height: 40px;
}

.transTitle {
  display: flex;
}

.text {
  font-size: 14px;
}

.item {
  margin-top: 20px;
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>